<template>
    <div>
      <p v-if="podUrl !== null" @click="goToLink()">打开前端</p>      
    </div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        activeName: '1',
        podUrl: null
      };
    },
    props: ['detailData'],
    async mounted () {
      this.$nextTick(async () => {
        console.log(this.detailData)
        console.log(this.detailData.tcp_port_list)
        await this.genUrl(this.detailData.tcp_port_list)
        console.log(this.podUrl)
        await this.getData()
      })
    },
    components: {
    },
    methods: {
      handleClick() {},
      async getData() {
        await new Promise(resolve => {
            setTimeout(() => {
              this.target = ['上海', '北京', '广州', '深圳']
              resolve()
            }, 1000)
        })
        return
      },
      goToLink() {
        let path = this.podUrl;
        console.log('path', path)
        window.open(path, '_blank');
      },
      genUrl(tcp_port_list) {
        if (tcp_port_list == null) {
          return null;
        }        
        let simulationFrontUrl = process.env.VUE_APP_SIMULATION_URL; 
        let nodePort4000 = tcp_port_list.filter(map => map.containerPort == '4000')[0].nodePort;
        let nodePort4001 = tcp_port_list.filter(map => map.containerPort == '4001')[0].nodePort;
        let endpoint = tcp_port_list[0].endpoint.split(':')[0];        
        let url = `${simulationFrontUrl}/#/Menu?IP=${endpoint}&port1=${nodePort4000}&port2=4001&port3=${nodePort4001}`;
        this.podUrl = url;        
      }      

    }
  }
  </script>
  <style lang="less" scoped>
  
  </style>